<template>
  <page-container>
    <div class="study-judge-page2">
      <!-- 要素选择 -->
      <a-card class="element-list-area">
        <span :style="{ marginRight: '8px', fontSize: '16px', color: '#868686' }">
          情报颗粒池：
        </span>
        <a-checkable-tag
          :checked="item.name === checkedTag"
          v-for="(item, index) in elementList"
          @change="handleChange(item)"
          :key="item.code"
        >
          <span :style="{ fontSize: '16px' }">
            <i
              v-html="topList.icon[index]"
              :style="{ color: item.name === checkedTag ? '#fff' : topList.color[index] }"
              class="iconfont"
            ></i>

            {{ item.name }}
          </span>
        </a-checkable-tag>
      </a-card>
      <a-card class="search-area">
        <!-- 搜索区 -->
        <a-card size="small" :bordered="false" style="border-buttom: 1px">
          <a-row style="justify-content: space-between">
            <a-col>
              <a-input-group compact>
                <a-input-search
                  v-model:value="searchValue"
                  @search="inputSearch"
                  placeholder="请输入搜索内容"
                />
              </a-input-group>
            </a-col>
            <a-col>
              报警时间：
              <a-space direction="vertical" :locale="zhCN">
                <!-- <a-range-picker
                  @change="pickerChange"
                  v-model:value="valueTime"
                  :format="dateFormat"
                /> -->
                <pickers :data="valueTime" @setTime="pickerChange" />
              </a-space>
            </a-col>
          </a-row>
        </a-card>
        <!-- 分类筛选 -->
        <supper-select @change="supperSelectChange"></supper-select>
      </a-card>

      <!-- 总数 -->
      <div class="police-total">
        已为您找到
        <span class="police-total-num">{{ total }}</span>
        个串并线索
      </div>
      <!-- 表格 -->
      <a-table
        style="margin-top: 8px"
        :pagination="false"
        :columns="columns2"
        :data-source="dataList"
        :loading="spinning"
      >
        <template #name="{ text }">
          <a>{{ text }}</a>
        </template>
        <template #classify="{ record }">
          <div v-for="(item, index) in record.classifyTop3List" :key="item">
            <a-badge
              :color="tableColors[index]"
              :text="item.classifyName + '(' + item.caseNum + ')'"
            />
          </div>
        </template>
        <template #deal="{ record }">
          <div v-for="(item, index) in record.dealTop3List" :key="item">
            <a-badge
              :color="tableColors[index]"
              :text="item.dealSummaryName + '(' + item.caseNum + ')'"
            />
          </div>
        </template>
        <template #action="{ record, index }">
          <a-space size="large">
            <a @click="attentionClick(index)">
              <div style="width: 65px">
                <div v-if="record.concernStatus == '0'">
                  <heart-outlined />
                  关注
                </div>
                <div v-else>
                  <heart-filled />
                  已关注
                </div>
              </div>
            </a>
            <a @click="detailsClick(index)">
              <file-search-outlined />
              详情
            </a>
            <a @click="forceGraphClick(index)">
              <deployment-unit-outlined />
              图谱
            </a>
          </a-space>
        </template>
      </a-table>
      <!-- 分页 -->
      <a-pagination
        v-if="dataList.length"
        style="text-align: center; margin-top: 20px"
        show-quick-jumper
        v-model:current="currentPage"
        :total="total"
        @change="onChange"
      />
    </div>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, toRaw, ref, onMounted, reactive, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import moment, { Moment } from 'moment';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import 'moment/dist/locale/zh-cn';
import SupperSelect from '@/components/supper-select/index.vue';
import {
  HeartOutlined,
  DeploymentUnitOutlined,
  FileSearchOutlined,
  HeartFilled,
} from '@ant-design/icons-vue';
import { querySeriesInfo, getOperate, getQueryTime } from '@/api/study-judge/list/research-list';
import { dataList, columns2, tableColors } from '../list/js/table';
import { queryParams, getParamsCodes } from '../list/js/params';
import { topList, elementList, getElementList } from '../list/js/element';
import pickers from '@/components/s-picker/picker.vue';
export default defineComponent({
  name: 'studyJudgeList2',
  setup() {
    const router = useRouter();
    const spinning = ref<boolean>(true);
    const currentPage = ref<number>(1);
    const total = ref<number>(0);
    const searchValue = ref<string>('');
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const valueTime = ref<Moment[]>();
    const checkedTag = ref('全部');

    // 勾选组件返回值
    const supperSelectChange = (codes: Array<string>) => {
      spinning.value = !spinning.value;
      const { ai, jq, fk, xqdw } = getParamsCodes(toRaw(codes));
      queryParams.classifyCodes = ai;
      queryParams.callSummaryCodes = jq;
      queryParams.dealSummaryCodes = fk;
      queryParams.xqdwCodes = xqdw;
      queryParams.inputParams = searchValue.value;
      getTableList();
    };

    // 跳转详情
    const detailsClick = index => {
      let routeUrl = router.resolve({
        path: '/studyJudge/details2',
        query: {
          seriesNo: dataList.value[index].seriesNo,
          featureValue: dataList.value[index].featureValue,
          featureCode: dataList.value[index].featureCode,
          callTimeStart: queryParams.callTimeStart,
          callTimeEnd: queryParams.callTimeEnd,
          classifyCodes: queryParams.classifyCodes,
          callSummaryCodes: queryParams.callSummaryCodes,
          dealSummaryCodes: queryParams.dealSummaryCodes,
          inputParams: queryParams.inputParams,
          xqdwCodes: queryParams.xqdwCodes,
        },
      });
      window.open(routeUrl.href, '_blank');
    };

    // 跳转图谱（续串）
    const forceGraphClick = index => {
      let routeUrl = router.resolve({
        name: 'forceGraph',
        query: {
          seriesNo: dataList.value[index].seriesNo,
          callTimeStart: queryParams.callTimeStart,
          callTimeEnd: queryParams.callTimeEnd,
        },
      });
      window.open(routeUrl.href, '_blank');
    };

    const getTableList = async () => {
      currentPage.value = 1;
      queryParams.page = 1;
      spinning.value = true;
      const res = await querySeriesInfo(queryParams);
      spinning.value = false;
      if (res.code === 200) {
        if (res.data) {
          dataList.value = res?.data?.list || [];
          total.value = res?.data?.count || 0;
        } else {
          dataList.value = [];
          total.value = 0;
        }
      } else {
        dataList.value = [];
        total.value = 0;
      }
    };

    //报警时间
    const getTime = async () => {
      const res = await getQueryTime({ module: 'DWYP' });
      if (res.code === 200) {
        queryParams.callTimeStart = res.data.callTimeStart;
        queryParams.callTimeEnd = res.data.callTimeEnd;
        valueTime.value = [
          moment(res.data.callTimeStart, dateFormat),
          moment(res.data.callTimeEnd, dateFormat),
        ];
      }
      getTableList();
    };

    //头部接口
    const handleChange = item => {
      spinning.value = !spinning.value;
      checkedTag.value = item.name;
      queryParams.inputParams = searchValue.value;
      queryParams.featureCode = item.code;
      getTableList();
    };

    //分页
    const onChange = async (pageNumber: number) => {
      spinning.value = !spinning.value;
      queryParams.page = pageNumber;
      const res = await querySeriesInfo(queryParams);
      spinning.value = !spinning.value;
      if (res.code === 200) {
        dataList.value = res.data.list;
        total.value = res.data.count;
      }
    };

    //搜索框
    const inputSearch = () => {
      spinning.value = !spinning.value;
      queryParams.inputParams = searchValue.value;
      getTableList();
    };

    //时间选择器
    const pickerChange = value => {
      spinning.value = !spinning.value;
      queryParams.callTimeStart = value[0] ? value[0] : '';
      queryParams.callTimeEnd = value[1] ? value[1] : '';
      getTableList();
    };

    //关注
    const attentionClick = async (index: number) => {
      spinning.value = !spinning.value;
      const ListConcernParams = reactive({
        concernStatus: '',
        featureValue: dataList.value[index].featureValue,
        featureCode: dataList.value[index].featureCode,
      });
      if (dataList.value[index].concernStatus == '0') {
        ListConcernParams.concernStatus = '1';
      } else {
        ListConcernParams.concernStatus = '0';
      }
      const res = await getOperate(ListConcernParams);
      spinning.value = !spinning.value;
      if (res.code === 200) {
        dataList.value[index].concernStatus = ListConcernParams.concernStatus;
      }
    };

    onMounted(() => {
      getElementList();
    });
    onActivated(() => {
      getTime();
    });

    return {
      dataList,
      columns2,
      elementList,
      checkedTag,
      tableColors,
      spinning,
      zhCN,
      currentPage,
      total,
      valueTime,
      dateFormat,
      topList,
      searchValue,

      //方法
      handleChange,
      supperSelectChange,
      detailsClick,
      forceGraphClick,
      inputSearch,
      pickerChange,
      onChange,
      attentionClick,
    };
  },
  components: {
    SupperSelect,
    HeartOutlined,
    DeploymentUnitOutlined,
    FileSearchOutlined,
    HeartFilled,
    pickers,
  },
});
</script>

<style lang="less" scoped>
.study-judge-page2 {
  // 要素选择
  :deep(.element-list-area) {
    .ant-card-body {
      padding: 14px 24px;
      .ant-tag {
        margin-right: 10px;
        padding: 2px 8px;
        border-radius: 12px;
      }
    }
  }
  //   搜索区域
  :deep(.search-area) {
    margin-top: 8px;
    & > .ant-card-body {
      padding: 0;
    }
  }
  // 总数
  .police-total {
    padding: 10px;
    .police-total-num {
      padding-right: 5px;
      padding-left: 5px;
      color: #138fde;
      font-weight: 700;
    }
  }
}
.active {
  color: #fff;
}
</style>
